<template>
  <view class="mine-active-wrap" >
    <view class="header">
      <view class="search">
        <view class="search__icon iconfont icon-sousuo"></view>
        <input
          class="search__input"
          type="text"
          :value="name"
          @input="handleSearch"
          @confirm="handleConfirm"
          placeholder="输入活动标题"
        />
      </view>
      <!-- tab 切换 -->
      <view class="tab-box">
        <u-tabs
          :list="classList"
          :current="current"
          :fontSize="28"
          :isScroll="false"
          bgColor="#ffffff"
          inactiveColor="#999999"
          @change="handleTabChange"
          :active-item-style="{ color: '#333' }"
          :bar-style="{ background: '#FEDD00', borderRadius: '100rpx' }"
        ></u-tabs>
      </view>
    </view>

   <view class="list">
     <view
       v-for="(item, index) in items"
       :key="index"
       class="item-box-list"
       @tap="handleToDetail(item)"
     >
      <view class="head-box" >
        <view class="time" >{{ item.created_at }}</view>
        <view class="status" v-if="item.status === 1" >已参与</view>
        <view class="status-cancel" v-else-if="item.post_status === 2" >司机取消</view>
        <view class="status-cancel" v-else-if="item.status === 2" >已取消</view>
      </view>
      <view class="item-box" >
       <image class="item-box__img" :src="item.post_thumb" />
       <view class="item-box__content">
         <view class="item-box__content--title">
           <view
             :class="[
               'tag',
               item.post_type_label === 'CAR' || item.post_type_label === 'ACTIVITY'
                 ? 'show-join'
                 : 'show-acticle',
             ]"
             >{{ item.post_type_name }}</view
           >
           <view class="title">{{ item.post_title }}</view>
         </view>
         <view class="item-box__content--time">{{ item.post_time }}</view>
       </view>
      </view>
     </view>
     <view class="full-green" v-if="!isEmpty">
       <load-more :status="loadingStatus"></load-more>
     </view>
     <view v-else>
       <u-empty description="暂无参与活动～"></u-empty>
     </view>
   </view>

  </view>
</template>

<script>
  import loadMore from '@/components/load-more.vue';
  import uEmpty from '@/basic-components/u-empty/index.vue';
  import uTabs from '@/basic-components/u-tabs/index.vue';
  import { MY_ACTIVE_JOIN } from '@/api/user';
  import moreLoadMixins from '@/common/load-more';
  import { momentDate } from '@/tool';
  export default {
    components: {
      loadMore,
      uEmpty,
      uTabs
    },
    mixins: [moreLoadMixins],
    data() {
      return {
        name: '',
        // tab切换
        current: 0,
        classList: [
          {
            name: '全部'
          },
          {
            name: '已参与'
          },
          {
            name: '已取消'
          }
        ]
      }
    },
    onShow() {
      // 列表信息
      this.resetInit();
    },
    onPullDownRefresh() {

      this.resetInit();

      uni.stopPullDownRefresh();
    },
    methods: {
       handleSearch(e) {
         // 搜索
         this.name = e.detail.value;
       },
       handleConfirm() {
         // 确认搜索
         this.resetInit();
       },
       handleTabChange(index) {
         if(this.current === index) {
           return
         }
         this.current = index;
         this.resetInit();
       },
       initData() {
         // 列表搜索
         const params = {};
         params.page = this.pages.currentPage;
         params.per_page = this.pages.perPage;
         if(this.current) {
            params.status = this.current;
         }
         if (this.name) {
           params.post_title = this.name;
         }
         return this.$http.get(MY_ACTIVE_JOIN, params).then(res => {
           const { data, last_page, current_page, total } = res;

           if (data && data.length) {
             data.forEach(item => {
               item.post_time = momentDate(item.post_time);
               item.created_at = momentDate(item.created_at);
             })

             this.items = this.items.concat(data);
             this.pages.currentPage=current_page+1;
           }
           return {
             perPage: this.pages.perPage,
             currentPage: this.pages.currentPage,
             hasNext: !last_page === current_page,
             empty: current_page === 1 && total === 0,
           };
         });
       },
       handleToDetail(item) {
         const type = item.post_type_label;

         let params = {};
             params['id'] = item.post_id;
             params['type'] = type;
             if(item.post_type_label === 'CAR' && item.post_status === 2) {
                params['post_status'] = 2;
             }
         this.$navigate({
           page: 'detail',
           params
         });
       },
    }
  }
</script>

<style lang="less" >
  .mine-active-wrap{
    .header {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 99;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100vw;
      height: 182rpx;
      padding-top: 24rpx;
      background: #fff;
    }
    .search {
      display: flex;
      align-items: center;
      width: 682rpx;
      height: 64rpx;
      margin-bottom: 12rpx;
      padding: 0 30rpx;
      background: #f5f5f5;
      border-radius: 1000rpx;

      &__icon {
        font-size: 30rpx;
        margin-top: -4rpx;
        margin-right: 12rpx;
      }

      &__input {
        flex: 1;
        align-items: center;
        height: 100%;
        padding: 10rpx 0;
        box-sizing: content-box;
      }
    }
    .tab-box{
      width: 100%;
      background-color: #FFFFFF;
    }
    .list {
      display: flex;
      flex-direction: column;
      padding-top: 200rpx;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth;
        .item-box-list{
          width: 710rpx;
          margin: auto;
          padding: 20rpx;
          margin-bottom: 20rpx;
          border-radius: 16rpx;
          box-sizing: border-box;
          background-color: #ffffff;
          .head-box{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 20rpx;
            padding-top: 10rpx;
            margin-bottom: 20rpx;
            border-bottom: 1px solid #EEEEEE;
            .time{
              font-size: 24rpx;
              color: #999999;
            }
            .status{
              font-size: 28rpx;
              font-weight: 500;
              color: #FF6034;
            }
            .status-cancel{
              font-size: 28rpx;
              font-weight: 500;
              color: #666666;
            }
          }
        }
        .item-box {
          display: flex;
          align-items: center;
          height: 200rpx;
          &__img {
            flex-shrink: 0;
            height: 100%;
            width: 180rpx;
            margin-right: 20rpx;
            border-radius: 10rpx;
          }
          &__content {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
            flex: 1;
            &--title {
              display: -webkit-box;
              overflow: hidden;
              text-overflow: ellipsis;
              word-break: break-all;
              white-space: normal !important;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              .tag {
                display: inline-block;
                color: #ffffff;
                font-size: 24rpx;
                padding: 4rpx 10rpx;
                margin-top: -4rpx;
                border-radius: 8rpx;
                transform-origin: left center;
                transform: scale(0.8);
                &.show-acticle {
                  background: linear-gradient(135deg, #ff70ac 0%, #ff4666 100%);
                }
                &.show-join {
                  background: linear-gradient(135deg, #ffad64 0%, #ff6034 100%);
                }
              }
              .title {
                display: inline;
                font-size: 28rpx;
                font-weight: 500;
              }
            }
            &--time {
              font-size: 24rpx;
              color: #999999;
            }
          }
        }
      }
  }
</style>
